<template>
    <div>
        <el-drawer
            :model-value.sync="isPointDrawerShow"
            direction="rtl"
            :close-on-press-escape="false"
            size="600px"
            :before-close="handleClose"
            :close-on-click-modal="false"
        >
            <template #title>
                <h4>
                    {{ addPoint.ponitNameAlias.name }}
                    <template v-if="pointType === 'inner'"> ({{ addPoint.ponitNameAlias.eleType.name }}) </template>
                    <template v-if="pointType === 'door'"> ({{ addPoint.ponitNameAlias.subType.name }}) </template>
                </h4>
            </template>
            <template #default>
                <div v-loading="loading" class="point">
                    <el-tabs v-model="activeName" size="small" @tab-click="handleClick">
                        <el-tab-pane
                            :label="pointType === 'door' ? alias[signType] : alias[TYPECODE[pointType][0]]"
                            :name="pointType === 'door' ? signType : TYPECODE[pointType][0]"
                        >
                        </el-tab-pane>
                        <el-tab-pane
                            v-if="pointType !== 'door'"
                            :label="alias[TYPECODE[pointType][1]]"
                            :name="TYPECODE[pointType][1]"
                        >
                        </el-tab-pane>
                        <template v-if="!isAddPointShow">
                            <screen
                                ref="ruleFormRef"
                                :item="addPoint.addPonitObject"
                                :sign-type="activeName"
                                @onDelItem="onDelPointItem"
                                :pointType="pointType"
                            ></screen>
                        </template>
                        <div v-for="(item, index) in addPoint.addPointDTO" :key="index">
                            <screen  :pointType="pointType" :item="item" :index="index + 1" :sign-type="activeName"></screen>
                        </div>
                    </el-tabs>
                    <span v-if="isAddPointShow" @click="onAdd"><b>+</b> 新建</span>
                    <span v-if="!isAddPointShow" class="disabledClass"><b>+</b> 新建</span>
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="handleClose"> 取消 </el-button>
                    <el-button :loading="dialogBtnLoading" type="primary" @click="onAddPoint">
                        确认
                    </el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, defineEmits, defineProps } from 'vue';
import {
    queryInnerPointByEleId,
    queryInnerBoxByEleId,
    queryOutPointByEleId,
    queryOutBoxByEleId,
    queryBarrierMediaByGatewayId,
    queryGatewayMediaByGatewayId,
    addBarrierMedia,
    addGattingMedia,
    addInnerPoint,
    addOutPoint,
    addInnerBox,
    addOutBox,
    elevatorQueryById,
    gatewayQueryById,
} from '@/api/point';
import screen from './Screen.vue';
import { PointData } from './pointType';
import { ElMessage } from 'element-plus';
import type { TabsPaneContext } from 'element-plus';

const emits = defineEmits(['onAddPointConfirm', 'update:isPointDrawerShow']);
const ruleFormRef: any = ref(null);
const TYPECODE: any = { door: [5, 6], out: [2, 4], inner: [1, 3] };
const props = defineProps({
    isPointDrawerShow: {
        type: Boolean,
        default: false,
    },
    pointType: {
        type: String,
        default: 'door',
    },
    id: {
        type: String,
        default: '',
    },
    signType: {
        type: [String, Number],
        default: '',
    },
});

const addPoint = reactive(new PointData());
const alias = reactive(addPoint.alias);
const activeName = ref('');
const loading = ref(false);
const isAddPointShow = ref(true);
const dialogBtnLoading = ref(false);

// 获取当前点位的类型的数据
const getPointDetail = async (): Promise<void> => {
    loading.value = true;
    isAddPointShow.value = true;
    console.log('activeName',activeName.value);
    switch (+activeName.value) {
        case 1:
            addPoint.addPointDTO = await queryInnerPointByEleId({ elevatorId: props.id });
            break;
        case 2:
            console.log('elevatorId',props.id);
            addPoint.addPointDTO = await queryOutPointByEleId({ eleId: props.id }); 
            console.log('addPoint.addPointDTO',addPoint.addPointDTO);
            break;
        case 3:
            addPoint.addPointDTO = await queryInnerBoxByEleId({ elevatorId: props.id });
            break;
        case 4:
            addPoint.addPointDTO = await queryOutBoxByEleId({ eleId: props.id });
            break;
        case 5:
            addPoint.addPointDTO = await queryGatewayMediaByGatewayId({ gatewayId: props.id });
            break;
        case 6:
            addPoint.addPointDTO = await queryBarrierMediaByGatewayId({ gatewayId: props.id });
            break;
        default:
    }
    loading.value = false;
};
// 获取当前点位管理的名称和类型
const getData = async (type: string): Promise<void> => {
    if (type === 'out') {
        // addPoint.ponitNameAlias = await floorQueryById(props.id);
        addPoint.ponitNameAlias = await elevatorQueryById(props.id);
        console.log('addPoint.ponitNameAlias',addPoint.ponitNameAlias);
    } else if (type === 'inner') {
        addPoint.ponitNameAlias = await elevatorQueryById(props.id);
    } else if (type === 'door') {
        addPoint.ponitNameAlias = await gatewayQueryById(props.id);
    }
};
// 点击新建按钮数据重置
const onAdd = (): void => {
    Object.keys(addPoint.addPonitObject).forEach((key) => {
        if (key === 'tabooIndustryList') {
            addPoint.addPonitObject['tabooIndustryList'] = [];
        } else {
            addPoint.addPonitObject[key] = '';
        }
    });
    isAddPointShow.value = false;
};
// 删除新建点位表单
const onDelPointItem = (): void => {
    isAddPointShow.value = true;
};
// 获取当前新建点位的类型，新建调用新建点位接口
const onAddPoint = async (): Promise<void> => {
    ruleFormRef.value && (await ruleFormRef.value.submitForm());
    if (!isAddPointShow.value) {
        dialogBtnLoading.value = true;
        try {
            switch (+activeName.value) {
                case 1:
                    await addInnerPoint({ ...addPoint.addPonitObject, elevatorId: props.id });
                    break;
                case 2:
                    await addOutPoint({ ...addPoint.addPonitObject, elevatorId: props.id });
                    break;
                case 3:
                    await addInnerBox({ ...addPoint.addPonitObject, elevatorId: props.id });
                    break;
                case 4:
                    await addOutBox({ ...addPoint.addPonitObject, elevatorId: props.id });
                    break;
                case 5:
                    await addGattingMedia({ ...addPoint.addPonitObject, gatewayId: props.id });
                    break;
                case 6:
                    await addBarrierMedia({ ...addPoint.addPonitObject, gatewayId: props.id });
                    break;
                default:
            }
            dialogBtnLoading.value = false;
            ElMessage.success('新建点位成功');
            emits('update:isPointDrawerShow', !props.isPointDrawerShow);
            emits('onAddPointConfirm');
        } catch {
            dialogBtnLoading.value = false;
        }
    } else {
        emits('update:isPointDrawerShow', !props.isPointDrawerShow);
    }
};
// 点击TAB切换类型数据
const handleClick = (tab: TabsPaneContext, event: Event) => {
    activeName.value = tab.paneName;
    getPointDetail();
};
// 关闭弹窗的，更新弹框的显示
const handleClose = () => {
    emits('update:isPointDrawerShow', !props.isPointDrawerShow);
};
// 监听管理点位弹框的打开，调用点位详情列表以及点位名称和类型
watch(
    () => props.isPointDrawerShow,
    (isPointDrawerShow) => {
        if (isPointDrawerShow) {
            if (props.pointType === 'door') {
                activeName.value = props.signType;
            } else {
                activeName.value = TYPECODE[props.pointType][0];
            }
            getData(props.pointType);
            getPointDetail();
        }
    }
);
</script>

<style lang="scss" scoped>
.point {
    position: relative;
    span {
        position: absolute;
        right: 15px;
        top: 10px;
        font-size: 15px;
        color: #e60044;
        cursor: pointer;
    }
    .disabledClass {
        color: #ddd;
    }

    :deep(.el-tabs__header) {
        margin: 0 0 16px 0 !important;
    }
}
</style>
